<template>
  <div>
    <el-button type="primary" @click="willAdd">添加</el-button>
    <!-- 表格组件 -->
    <v-list @willUpdate="willUpdate" :list="list" @init="init"></v-list>
    <!-- 弹框表单组件 -->
    <v-form :status="status" @init="init" :list="list" ref="from"></v-form>
    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next"
      :total="total"
      background
      :page-size="size"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
import vForm from "./components/form.vue";
import vList from "./components/list.vue";
import { requsercount, requserlist } from "../../http/api";
export default {
  components: {
    vList,
    vForm,
  },
  data() {
    return {
      status: {
        isshow: false, //控制弹框出现与消失ture为出现
        isAdd: true, //控制弹框是点击添加出来的还是点击修改出来的，ture添加
      },
      list: [],
      // 分页的数据
      total: 0, //总数
      size: 2, //每页展示的数
      page:1
    };
  },
  methods: {
    willAdd() {
      this.status = {
        isshow: true,
        isAdd: true,
      };
    },
    willUpdate(uid) {
      this.status = {
        isshow: true,
        isAdd: false,
      };
      this.$refs.from.getOne(uid);
    },
    // 请列表+请总数
    init() {
      this.getList()
      this.countPage()
    },
    // 请列表
    getList() {
      requserlist({
        size: this.size,
        page: this.page,
      }).then((res) => {
        if (res.data.code == 200) {
          let arr = res.data.list ? res.data.list : [];
          if(arr.length==0&&this.page!=1){
            this.page--;
            this.getList();
            return;
          }
          this.list=arr;
        }
      });
    },

    // 请总条数封装
    countPage() {
      requsercount().then((res) => {
        if (res.data.code == 200) {
          this.total = res.data.list[0].total;
        }
      });
    },
    // 页码改变
    changePage(aa) {
      console.log(aa);
      this.page=aa
      this.getList();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style>
</style>